<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>服装款式</title>
<%@ include file="/WEB-INF/views/include/head.jsp"%>
<script src="${ctxStatic}/js/jquery-1.9.1.min.js"></script>
<script src="${ctxStatic}/js/DateTimePicker.js"></script>
<script src="${ctxStatic}/js/layer.js"></script>
<script src="${ctxStatic}/js/style.js"></script>
<script src="${ctxStatic}/dateCalendar/WdatePicker.js"></script>
<link rel="stylesheet" href="${ctxStatic}/css/common_erp.css">
<link rel="stylesheet" href="${ctxStatic}/css/list.css">
	<script src="${ctxStatic}/echartJs/echarts.min.js"></script>
<script>
	$(document).ready(function() {
		
		for (var i = 0; i < 8; i++) {
			$("#searchForm").append("<div id='mainOrder"+i+"' class='pieDiv' style='height: 200px;margin-top: 20px;width: 20%;float: left;'></div>");
			myChartCommon('mainOrder'+i,i);
		}
	});

	/* 共通饼状图生成方法  */
	function myChartCommon(divName,object){
		// 基于准备好的dom，初始化echarts实例
	    var myChart = echarts.init(document.getElementById(divName));
		var arry2=[];
	    $.each(object.reportformsList,function(i,e){
	    	var temp = {value:e.dataQuantity, name:e.optionValue+":"+e.dataName};
	    	arry2.push(temp);
		});
		option = {
			    title : {
			        text: object.dataSource,
			        subtext: object.startDate+"~"+object.endDate,
			        x:'left'
			    },
			    tooltip : {
			        trigger: 'item',
			        formatter: "{a}<br>{b}<br>{c} ({d}%)"
			    },
			    series : [
			        {
			        	name: object.dataSource,
			            type: 'pie',
			            radius : '55%',
			            center: ['50%', '60%'],
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        }
			    ]
			};
		option.series[0].data=arry2;
		// 使用刚指定的配置项和数据显示图表。
	    myChart.setOption(option);
	}

	// 导出
	function exportExcel() {
		if ($("#startDate").val() == "" || $("#endDate").val() == "") {
			tipParent("请输入日期");
			return false;
		}
		$("#activity_pane").showLoading();
		var params = {"startDate":$("#startDate").val(),"endDate":$("#endDate").val()};
		$.post("${ctx}/reportforms/style/exportReportforms", params ,function(result) {
			if (result == "true") {
				window.location.href="${ctx}/reportforms/style/makeExportFile?startDate="+$("#startDate").val()+"&endDate="+$("#endDate").val();
			}else {
				tipParent(result.message);
			}
			$("#activity_pane").hideLoading();
		}, 'json');
	}
	//检索 
	function searchListForm() {
		if ($("#startDate").val() == "" || $("#endDate").val() == "") {
			tipParent("请输入日期");
			return false;
		}
		$("#activity_pane").showLoading();
		var params = {"startDate":$("#startDate").val(),"endDate":$("#endDate").val()};
		$.post("${ctx}/reportforms/style/checkExist", params ,function(result) {
			
			$.post("${ctx}/reportforms/style/searchList", params ,function(result) {
				$(".pieDiv").remove();
				$.each(result,function(i,e){
					$("#searchForm").append("<div id='mainOrder"+i+"' class='pieDiv' style='height: 340px;margin-top: 20px;width: 33%;float: left;'></div>");
					myChartCommon('mainOrder'+i,e);
				});
				$("#activity_pane").hideLoading();
			}, 'json');
		}, 'json');
		
	}
</script>
</head>
<body style="height: 830px;overflow: auto;">
	<form id="searchForm">
		<div class="listArea" id="activity_pane">
			<div class="listBg">
				<div class="searchArea clearfix">
					<div class="searchLeft clearfix" >
						<div class="searchInp clearfix">
							<!-- 日期  -->
							<p>
								<spring:message code="produce_workticket_date" />
							</p>
							<div class="timeBox">
								<input type="text" class="laydate-icon"
									onclick="WdatePicker({el:this,dateFmt:'yyyy-MM',onpicked:null})"
									id="startDate" name="startDate" style="width: 110px" value="${fns:getDate('yyyy-MM') }">
								<p class="list">~</p>
								<input type="text" class="laydate-icon"
									onclick="WdatePicker({el:this,dateFmt:'yyyy-MM',onpicked:null})"
									id="endDate" name="endDate" style="width: 110px" value="${fns:getDate('yyyy-MM') }">
							</div>
						</div>
					</div>
					<div class="searchRight clearfix">
						<button type="button" class="btn-js"  onclick="exportExcel()">
							<spring:message code="importExcel_export"/>
						</button>
						<button type="button" onclick="searchListForm();">
							统计
						</button>
					</div>
				</div>
				<!-- <div id="mainOrder" style="height: 200px;margin-top: 20px;width: 20%;float: left;"></div> -->
	</form>
</body>
</html>
